/*
 * @Author: Wangxi
 * @Date: 2023-06-10 10:31:22
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-12 15:49:46
 * @Description: 卡卷
 */
<template>
	<view class="coupon-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" title="Coupon">
				<view class="slot-icon" slot="rightIcon">
					<image @click="openSelect" style="width: 48rpx; height: 48rpx;"
						src="../../static/svg/IconFilter.svg" mode=""></image>
				</view>
			</c-navigation-bar>
			<!-- <view class=""> -->
			<couponCard v-for="(item,id) in list" :info="item" :key="id+''+'1'" type="notUsed"></couponCard>
			<couponCard v-for="(item,id)  in list" :info="item" :key="id+'2'" type="Used"></couponCard>
			<couponCard v-for="(item,id)  in list" :info="item" :key="id+'3'" type="EXPREID"></couponCard>
			<!-- </view> -->
		</c-layout>
		<u-popup class="coupon-type-pop" mode="bottom" borderRadius="60" v-model="couponTypePopShow">
			<view class="popup-main">
				<view class="type-tags">
					<view @click="currentType = item"
						:class="`capsule ${currentType.id === item.id ? 'is-selected':''}`"
						v-for="item in couponTypeList" :key="item.id">
						{{item.val}}
					</view>
				</view>
				<button type="default" @click="changeCurrentTypeData">Confirm</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						baifenbi: '50%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: '../../static/images/user/coupon.png'
					},
					{
						baifenbi: '70%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: 'https://lcdn-us.icons8.com/c/Jz53sgOJQUOCqmNDY0n1Pg/18894baf3e370ffd97ea2bd5245429bf5c8d8e39.png'
					},
					{
						baifenbi: '50%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: 'https://lcdn-us.icons8.com/c/Jz53sgOJQUOCqmNDY0n1Pg/e2d8a4de4c2119be40137a1a7f94428c253966c8.png'
					},
					{
						baifenbi: '75%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: 'https://lcdn-us.icons8.com/c/Jz53sgOJQUOCqmNDY0n1Pg/8e0ab6851ddc64fcfacad6970bb357f911a1da6b.png'
					}
				],
				// 优惠券类型选择
				couponTypePopShow: false,
				// 优惠券类型列表
				couponTypeList: [{
						id: 1,
						val: 'All types'
					},
					{
						id: 2,
						val: 'Shopping voucher'
					},
					{
						id: 3,
						val: 'Shop coupon'
					},
					{
						id: 4,
						val: 'Commodity coupon'
					},
				],
				// 当前选中
				currentType: {
					id: 1
				},
				// 需要提交的
				currentTypeData: {},

			};
		},
		methods: {
			// 打开选择优惠券类型弹出层
			openSelect() {
				this.currentType = {
					...this.currentTypeData
				}
				this.couponTypePopShow = true
			},
			// 
			changeCurrentTypeData() {
				this.currentTypeData = {
					...this.currentType
				}
				this.couponTypePopShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-container {
		.slot-icon {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.container-box {}

		.coupon-type-pop {
			.popup-main {
				padding: 80rpx 40rpx;
				padding-left: 20rpx;

				.type-tags {
					display: flex;
					flex-wrap: wrap;

					.capsule {
						margin-left: 20rpx;
						margin-bottom: 40rpx;
						white-space: nowrap;
						padding: 0 20rpx;
						height: 68rpx;
						line-height: 68rpx;
						border-radius: 34rpx;
						background: #f5f6f8;
						background-blend-mode: normal;
						font-size: 24rpx;
						color: #c9c9c9;

						&.is-selected {
							color: #fff;
							background-color: #2934d0;
						}
					}
				}

				>button {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
